import PointConfigDrawer from '@/components/PointConfigDrawer.vue'
import PointSettingFormDialog from '@/components/PointSettingFormDialog'
import RecordPointCount from '@/components/RecordPointCount.vue'
import { pathDataPoints } from '@/shared/map'
import { initAlarmMarkerLayer } from '@/shared/map/alarm'
import { initMap, map } from '@/shared/map/base'
import { initDrawTool } from '@/shared/map/drawTool'
import { handleConfirmFilePath } from '@/shared/map/file'
import { initHomePath, initHomePathLayer } from '@/shared/map/home'
import { initPathLayer } from '@/shared/map/path'
import { initPatrolpathLayer } from '@/shared/map/patrolPath'
import { handleConfirm } from '@/shared/map/template'
import { defineComponent, onMounted, ref } from 'vue'

import * as carMarker from '@/business/carMarker'
import ChangeCarDialog from '@/components/ChangeCarDialog.vue'
// import DebugController from '@/components/DebugController.vue'
import FileUploadDialog from '@/components/FileUploadDialog.vue'
import Icon from '@/components/Icon.vue'
import PatrolTaskDialog from '@/components/PatrolTaskDialog'
import RoadnetPathTableDialog from '@/components/RoadnetPathTableDialog.vue'
import ScheduleDialog from '@/components/ScheduleDialog'
import ScheduleSearchDialog from '@/components/ScheduleSearchDialog'
import TemplateDialog from '@/components/TemplateDialog.vue'
import TemplateSearchDialog from '@/components/TemplateSearchDialog.vue'
import ToolbarController from '@/components/ToolbarController.vue'
import { alarmMessageData, initAlarmPointLayer } from '@/shared/map/alarmPoint'
import { onMapDBClick } from '@/shared/map/debug'
import { toolbarItems } from '@/shared/map/index'
import { useRoadnet } from '@/shared/map/roadnet'
import { initMapShow, map1 } from '@/shared/map/showBase'
import { initTaskpathLayer } from '@/shared/map/taskPath'
import { mapRef1 } from './MapShow'
import PathPointSettings from './PathPointSettings.vue'
import ShowAlarmMessageDialog from './ShowAlarmMessageDialog'

export const mapRef = ref<HTMLDivElement>()
export default defineComponent({
  emits: ['confirm'],
  setup() {
    const roadnet = useRoadnet()
    onMounted(() => {
      initMap(mapRef.value!)
      initMapShow(mapRef1.value!)
      initHomePathLayer()
      initAlarmMarkerLayer()
      initPathLayer()
      roadnet.initRoadnetPathLayer()
      roadnet.initConnectionPathLayer()
      roadnet.initNavigationPathLayer()
      initPatrolpathLayer()
      initAlarmPointLayer()
      initTaskpathLayer()
      // initTaskPointLayer()
      initDrawTool()
      initHomePath()
      // initTaskPoints()
      carMarker.initMakerLayer(map, 0)
      carMarker.initMakerLayer(map1, 1)
      onMapDBClick()
    })

    return () => (
      <div class="h-full flex flex-col relative">
        <RecordPointCount class="absolute bottom-0  z-10"></RecordPointCount>
        {/* <DebugController class="absolute bottom-28 right-[35vw] z-10" /> */}
        {!carMarker.isConnectedWS.value && (
          <Icon icon="mdi:signal-off" class="absolute left-5 top-5 z-10 text-red-600" />
        )}
        <ToolbarController class="w-full" items={toolbarItems} />
        {/* <MapControllerSettings class="absolute top-12 left-2 z-10" /> */}
        <div class="flex-1 flex min-h-0">
          <div class="flex-1" ref={mapRef}></div>
          <PathPointSettings />
        </div>
        <TemplateDialog onConfirm={handleConfirm} />
        <TemplateSearchDialog />
        <RoadnetPathTableDialog />
        <ScheduleDialog pointsdata={pathDataPoints} />
        <ScheduleSearchDialog />
        <PointSettingFormDialog />
        <PatrolTaskDialog />
        <FileUploadDialog onConfirm={handleConfirmFilePath} />
        <PointConfigDrawer />
        <ShowAlarmMessageDialog alarmMessage={alarmMessageData.value} />
        <ChangeCarDialog />
      </div>
    )
  }
})
